import {View, Text, Image, TouchableOpacity} from 'react-native';
import React from 'react';
import Icon from 'react-native-vector-icons/Octicons';

export interface MovieCellProps {
  _id: string;
  cover: string;
  viewDesc: string;
  title: string;
  onClickMore: () => void;
  goDetail: () => void;
}
export function MovieCell(props: MovieCellProps) {
  const {cover, viewDesc, title} = props;
  return (
    <View>
      <TouchableOpacity onPress={() => props.goDetail()}>
        <Image
          style={{width: '100%', height: 250}}
          source={{
            uri: cover,
          }}
        />
      </TouchableOpacity>
      <View style={{padding: 10, alignItems: 'center'}}>
        <Text style={{color: 'white'}}>{title}</Text>
        <Text style={{color: 'white'}}>{viewDesc}</Text>

        <View style={{position: 'absolute', top: 10, right: 10}}>
          <Icon.Button
            color={'white'}
            size={10}
            name="kebab-horizontal"
            onPress={() => props.onClickMore()}
            backgroundColor="transparent"
          />
        </View>
      </View>
    </View>
  );
}
